<template>
  <sweet-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <sweet-menu-item index="1" class="sub-menu-previous">首页</sweet-menu-item>
    <sweet-submenu index="2">
      <template #title>管理</template>
      <sweet-menu-item index="2-1">选项1</sweet-menu-item>
      <sweet-menu-item index="2-2">选项2</sweet-menu-item>
      <sweet-submenu index="2-3">
        <template #title>选项3</template>
        <sweet-menu-item index="2-3-1">选项1</sweet-menu-item>
        <sweet-menu-item index="2-3-2">选项2</sweet-menu-item>
        <sweet-menu-item index="2-3-3">选项3</sweet-menu-item>
      </sweet-submenu>
      <sweet-menu-item index="2-4">选项4</sweet-menu-item>
    </sweet-submenu>
    <sweet-menu-item index="3" disabled>处理</sweet-menu-item>
    <sweet-menu-item index="4">工作台</sweet-menu-item>
  </sweet-menu>
</template>

<script setup>
import {ref} from 'vue';

const activeIndex = ref('1');
const activeIndex2 = ref('1');
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>
<style scope>
/* 包含子菜单的菜单 紧挨着的 左菜单(不包含子菜单)右边距需重新设置 */
.sub-menu-previous {
  padding-right: 40px!important;
}
</style>
